<template>
  <div class="box">
    <aside-box>
      <template #zh> 柱状图 </template>
      <template #en> bar chart </template>
      <div class="bar" ref="barRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";

let xData = ["2019", "2020", "2021", "2022", "2023"];

let data1 = [50, 150, 180, 135, 95, 70];

let data5 = [50, 150, 180, 135, 95, 70];

const option = {
  tooltip: {
    trigger: "axis",
    borderColor: "rgba(255,255,255,.3)",
    backgroundColor: "rgba(13,5,30,.6)",
    textStyle: {
      color: "white", //设置文字颜色
    },
    borderWidth: 1,
    // padding: fontSize(0.05),
    formatter: function (parms) {
      var str =
        "年份：" +
        parms[0].axisValue +
        "</br>" +
        parms[0].marker +
        "产量：" +
        parms[0].value;
      return str;
    },
  },
  textStyle: {
    color: "#C9C9C9",
  },
  grid: {
    containLabel: true,
    left: "2%",
    top: "15%",
    bottom: "2%",
    right: "5%",
  },
  xAxis: {
    type: "category",
    data: xData,
    axisLine: {
      show: true,
      lineStyle: {
        color: "#3d4c75",
      },
      symbol: ['none', 'arrow'], // 设置箭头图标
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      margin: 2, //刻度标签与轴线之间的距离。
      textStyle: {
        fontFamily: "Microsoft YaHei",
        color: "#adf3e6",
      },
      fontSize: 12,
      // fontStyle: 'bold',
    },
  },
  yAxis: [
    {
      type: "value",
      name: "单位：千克",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#3d4c75",
        },
      symbol: ['none', 'arrow'], // 设置箭头图标
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        // lineStyle: {
        //     // 使用深浅的间隔色
        //     color: ["#B5B5B5"],
        //     type: "dashed",
        //     opacity: 0.5,
        // },
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontFamily: "Microsoft YaHei",
          color: "#adf3e6",
        },
        fontSize: 12,
      },
    },
  ],
  series: [
    {
      type: "bar",
      name: "产量",
      data: data1,
      stack: "zs",
      barMaxWidth: "auto",
      barWidth: 14,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: "linear",
          global: false,
          colorStops: [
            {
              offset: 0,
              color: "#00e2cf",
            },
            {
              offset: 1,
              color: "#0c1f55",
            },
          ],
        },
      },
    },

    // 顶
    {
      data: data5,
      type: "pictorialBar",
      barMaxWidth: "20",
      symbolPosition: "end",
      symbol: "diamond",
      symbolOffset: [0, "-50%"],
      symbolSize: [14, 14],
      zlevel: 2,
      itemStyle: {
        normal: {
          color: "#6dfff3",
        },
      },
    },
  ],
};

const [barRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .bar {
    width: 100%;
    height: 200px;
  }
}
</style>